<template>
  <div class="deliver-user">
    <sec-form
      ref="secFormRef"
      :formData="formData"
      :ruleForm="ruleForm"
      :rules="rules"
      :optionData="optionData"
      :hideProp="hideProp"
    >
      <template v-slot:ownerInfo>
        <sec-desc colon :column="3" :keyData="ownerInfoCol" :data="ownerInfoData"></sec-desc>
      </template>
      <template v-slot:businessKeepLabel>
        <el-tooltip placement="top">
          <div slot="content">
            “业务线”用于统计各业务线治理覆盖率，转交时：<br />
            选择“是”，转交时同步将数据所属业务线变更（默认变更为转交后的治理人所属业务线，也可在下方修改）；<br />
            选择“否”，转交时数据所属业务线保持不变。
          </div>
          <el-button type="text" icon="el-icon-question">变更业务线</el-button>
        </el-tooltip>
      </template>
      <template v-slot:businessKeep>
        <el-radio-group v-model="ruleForm.businessKeep" @change="businessKeepChange">
          <el-radio :label="item.value" v-for="item in optionData.businessKeep" :key="item.value">{{
            item.label
          }}</el-radio>
        </el-radio-group>
      </template>
    </sec-form>
  </div>
</template>

<script>
import { getMysqlBusiness } from "api/taskCenterApi";
import { getLeaderInfo } from "api/riskCenterApi";
import { antiShake } from "@/utils";
export default {
  name: "mulaccountChange",
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  components: {},
  data() {
    const validateAddGovernOwnerInfo = (rule, value, callback) => {
      let { businessLineName, dept0, dept1 } = this.ownerInfoData;
      if (!this.ruleForm.account || !businessLineName || !dept0 || !dept1) {
        callback(new Error("请检查条件是否填写完整"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: { account: "", businessKeep: "1", remark: "", businessLine: "" },
      optionData: {
        businessLine: [],
        businessKeep: [
          { label: "是", value: "0" },
          { label: "否", value: "1" },
        ],
      },
      hideProp: { ownerInfo: true, businessKeep: true, businessLine: true },
      formData: [
        {
          type: "text",
          label: "治理人",
          prop: "account",
          span: 12,
          placeholder: "请输入账号(邮箱前缀)",
          input: antiShake(() => {
            if (!this.ruleForm.account) return;
            getLeaderInfo({ leader: this.ruleForm.account, source: this.source }).then((res) => {
              let data = res.data;
              this.ownerInfoData = data;
              this.ruleForm.businessLine = data.businessLineName;
            });
          }),
        },
        { type: "slot", label: "", prop: "ownerInfo" },
        { type: "slot", prop: "businessKeep" },
        { type: "select", label: "业务线", prop: "businessLine", filterable: true, clearable: false },
        { type: "textarea", label: "备注", prop: "remark" },
      ],
      rules: {
        account: [
          { validator: validateAddGovernOwnerInfo, required: true, message: "请输入正确账号", trigger: "blur" },
        ],
      },
      ownerInfoData: {},
      ownerInfoCol: [
        { label: "业务线", prop: "businessLineName" },
        { label: "一级部门", prop: "dept0" },
        { label: "二级部门", prop: "dept1" },
        { label: "三级部门", prop: "dept2" },
      ],
    };
  },
  computed: {},
  created() {
    this.initPage();
  },
  mounted() {
    this.source = this.data.source;
    this.ruleForm = this.data;
    this.$set(this.ruleForm, "businessKeep", "1");
    this.$set(this.ruleForm, "remark", "");
    this.$set(this.ruleForm, "account", this.data.leader);
    this.$set(this.ruleForm, "businessLine", this.data.businessLineName);
    console.log(this.ruleForm);

    //输入治理人之后，回显的业务线
    this.ownerInfoData = {
      businessLineName: this.data.businessLineName,
      dept0: this.data.dept0,
      dept1: this.data.dept1,
      dept2: this.data.dept2,
    };
  },
  methods: {
    initPage() {
      this.getMysqlBus();
    },
    businessKeepChange() {
      this.hideProp.businessLineName = this.ruleForm.businessKeep === "0" ? false : true;
    },
    getMysqlBus() {
      getMysqlBusiness().then((res) => {
        let data = res.data;
        this.optionData.businessLine = data.map((item) => ({ label: item, value: item }));
      });
    },
    isShowBusLine() {
      let { businessKeep, account } = this.ruleForm;
      this.hideProp.businessLine = businessKeep === "0" && account ? false : true;
    },
    isShowOwnerInfo() {
      let { businessLine, account } = this.ruleForm;
      this.hideProp.ownerInfo = businessLine && account ? false : true;
    },
  },
  watch: {
    "ruleForm.account": {
      immediate: true,
      deep: true,
      handler(newVal) {
        this.hideProp.businessKeep = newVal ? false : true;
        this.isShowBusLine();
        this.isShowOwnerInfo();
      },
    },
    "ruleForm.businessKeep": {
      immediate: true,
      deep: true,
      handler(newVal) {
        this.isShowBusLine();
      },
    },
    "ruleForm.businessLineName": {
      immediate: true,
      deep: true,
      handler(newVal) {
        this.isShowOwnerInfo();
      },
    },
  },
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
</style>
